<template>
	<view>
		<!-- 自定义导航栏 -->
		<custom-nav-bar @search="onSearchConfirm"></custom-nav-bar>

		<!-- 排序 | 筛选 -->
		<view class="d-flex border-top border-bottom a-center" style="height: 100rpx;">
			<view class="flex-1 item-container"
				v-for="(item, index) in screen.list" :key="index"
				@tap="changeScreen(index)">
				<view class="icon-text-container d-flex a-center">
					<text :class="screen.currentIndex === index ? 'main-text-color' : 'text-muted'">{{ item.name }}</text>
					<view class="icon-container d-flex flex-column">
						<view class="iconfont icon-sort-up-full line-h01 icon-margin-top"
							:class="item.status === 1 ? 'main-text-color' : 'text-light-muted'">
						</view>
						<view class="iconfont icon-sort-down-full line-h01"
							:class="item.status === 2 ? 'main-text-color' : 'text-light-muted'">
						</view>
					</view>
				</view>
			</view>
			<view class="flex-1 d-flex a-center j-center main-text-color text-large" @click="showDrawer">
				筛选
			</view>
		</view>

		<!-- 商品列表 -->
		<view>
		    <search-list :productList="productList" />
		  </view>

		<!-- 抽屉 -->
		<uni-drawer :visible="showRigth" mode="right" @close="showRigth = false">
			<!-- 抽屉内容 -->
			<view class="drawer-content">
				<!-- 筛选区域 -->
				<view class="filter-section">
					<view class="filter-title">价格区间</view>
					<view class="price-range">
						<view class="price-input">
							<input v-model="filter.priceMin" type="number" placeholder="最低价格" />
							<span>-</span>
							<input v-model="filter.priceMax" type="number" placeholder="最高价格" />
						</view>
					</view>
				</view>
				<view class="filter-section">
					<view class="filter-title">选择品牌</view>
					<view class="brand-selection">
						<view v-for="(brand, index) in filter.brands" :key="index" class="brand-option">
							<input type="checkbox" :id="'brand-' + brand" v-model="filter.selectedBrands" :value="brand" />
							<label :for="'brand-' + brand">{{ brand }}</label>
						</view>
					</view>
				</view>
			</view>

			<!-- 底部按钮 -->
			<view class="drawer-footer">
				<view class="confirm-btn" @click="confirm">确定</view>
				<view class="reset-btn" @click="reset">重置</view>
			</view>
		</uni-drawer>
		
	</view>
</template>

<script>
import customNavBar from "@/components/search/custom-navBar.vue";
import uniDrawer from "@/components/uni-ui/uni-drawer/uni-drawer.vue";
import searchList from "@/components/search-list/search-list.vue"
export default {
	components: {
		customNavBar,
		uniDrawer,
		searchList
	},
	data() {
		return {
			showRigth: false,
			screen: {
				currentIndex: 0,
				list: [
					{ name: "综合", status: 1 },
					{ name: "销量", status: 0 },
					{ name: "价格", status: 0 },
				]
			},
			// 筛选数据
			filter: {
				priceMin: '',
				priceMax: '',
				brands: ['品牌A', '品牌B', '品牌C', '品牌D'],
				selectedBrands: []
			},
			// 商品列表数据
			
		 productList: [
		          {
		            titlepic: "https://via.placeholder.com/150",
		            title: "商品名称1",
		            desc: "商品描述1",
		            pprice: "99.99",
		            comment_num: 120,
		            good_num: 90
		          },
		          {
		            titlepic: "https://via.placeholder.com/150",
		            title: "商品名称2",
		            desc: "商品描述2",
		            pprice: "199.99",
		            comment_num: 80,
		            good_num: 85
		          }
		          // 更多商品数据...
		        ]
		      };
		
	},
	methods: {
		// 显示抽屉
		showDrawer() {
			console.log('显示筛选抽屉');
			this.showRigth = true;
		},
		// 搜索事件
		onSearchConfirm(keyword) {
			console.log('搜索关键词:', keyword);
		},
		// 排序切换
		changeScreen(index) {
			let oldIndex = this.screen.currentIndex;
			let oldItem = this.screen.list[oldIndex];

			if (oldIndex === index) {
				oldItem.status = oldItem.status === 1 ? 2 : 1;
			} else {
				oldItem.status = 0;
				this.screen.currentIndex = index;
				let newItem = this.screen.list[index];
				newItem.status = 1;
			}
		},
		// 确定按钮点击
		confirm() {
			console.log('点击了确定按钮');
			this.showRigth = false;
			console.log('筛选条件：', this.filter);
		},
		// 重置按钮点击
		reset() {
			console.log('点击了重置按钮');
			this.filter.priceMin = '';
			this.filter.priceMax = '';
			this.filter.selectedBrands = [];
		}
	}
};
</script>

<style scoped>
.item-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.icon-text-container {
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 5px;
}

.icon-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.icon-margin-top {
	margin-top: 8px;
}

.main-text-color {
	color: #ff8f34;
}

.text-large {
	font-size: 14px;
}

.text-muted {
	color: #999;
}

.text-light-muted {
	color: #ddd;
}

/* 商品列表 */
.product-list {
	padding: 20px;
}

.product-item {
	display: flex;
	gap: 15px;
	margin-bottom: 20px;
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 8px;
	background-color: #fff;
}

.product-image {
	width: 100px;
	height: 100px;
	object-fit: cover;
	border-radius: 8px;
}

.product-info {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.product-name {
	font-size: 16px;
	font-weight: bold;
	color: #333;
}

.product-price {
	font-size: 14px;
	color: #ff8f34;
}

/* 抽屉内容 */
.drawer-content {
	padding: 20px;
}

.filter-section {
	margin-bottom: 20px;
}

.filter-title {
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 10px;
}

.price-range {
	display: flex;
	gap: 10px;
}

.price-input input {
	width: 80px;
	padding: 8px;
	border-radius: 4px;
	border: 1px solid #ccc;
}

.brand-selection {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.brand-option {
	display: flex;
	align-items: center;
}

.brand-option input {
	margin-right: 8px;
}

.drawer-footer {
	display: flex;
	position: fixed;
	bottom: 0;
	right: 0;
	width: 100%;
	border-top: 1px solid #f4f4f4;
}

.confirm-btn {
	flex: 1;
	background-color: #ff8f34;
	color: white;
	font-size: 14px;
	padding: 16px;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.3s;
}

.confirm-btn:hover {
	background-color: #e87b2e;
}

.reset-btn {
	flex: 1;
	background-color: #f4f4f4;
	color: #333;
	font-size: 14px;
	padding: 16px;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.3s;
}

.reset-btn:hover {
	background-color: #e4e4e4;
}
</style>
